import React, { useState } from 'react';
import { Space, Table, Tag ,Button,Modal,Popconfirm} from 'antd';
import type { TableProps } from 'antd';
import { useAppDispatch, useAppSelector } from '../../store/AppUse';
import Myfrom from '../../component/myfrom';
import * as Slice from '../../store/crmSlice'
import dayjs from 'dayjs';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}



const Shoplist: React.FC = () => {

    const [title,settitle] = useState('添加')
    const [itemobj,setitemobj] = useState('')
    const [isModalOpen,setIsModalOpen] = useState(false)

      const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

    const obj = useAppSelector(state=>state.todos)
    const dispatch = useAppDispatch()

        const [current,setcurrent] = useState('1')
    const [pageSize,setpageSize] = useState('1')
    const [total] = useState(obj.shoplist.length)
 
const columns: TableProps<DataType>['columns'] = [
  {
    title: '优惠券名称',
    dataIndex: 'couponName',
  },
  {
    title: '优惠券面值',
    dataIndex: 'couponFaceValue',
  },
  {
    title: '优惠券最低消费',
    dataIndex: 'couponMinimumConsumption',
  },
    {
    title: '优惠券有效期限',
    dataIndex: 'couponValidityPeriod',
  },
    {
    title: '排序',
    dataIndex: 'sort',
  },
    {
    title: '状态',
    dataIndex: 'status',
    render:(status)=>(
      <Tag color={status?'blue':'red'}>
        {status?'开启':'关闭'}
      </Tag>
    )
  },
      {
    title: '创建时间',
    dataIndex: 'createTime',
    render:(createTime)=>{
      return dayjs(createTime).format('YYYY MM-DD HH:mm:ss')
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button onClick={()=>{
            showModal()
            settitle('编辑')
            setitemobj(record)
        }}>编辑</Button>

         <Popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    onConfirm={()=>{
      dispatch(Slice.async_delshoplist(record.id))
    }}
    okText="Yes"
    cancelText="No"
  >
    <Button danger>删除</Button>
  </Popconfirm>

      </Space>
    ),
  },
];

    return <div>

 <Button type="primary" onClick={()=>{
            showModal()
            settitle('添加')
            setitemobj({})}
            }>
        添加
      </Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Myfrom title={title} key={new Date().getTime()} onCancel={handleCancel} itemobj={itemobj}/>
      </Modal>


        <Table<DataType> columns={columns} dataSource={obj.shoplist} rowKey={'id'} pagination={{
        current,pageSize,pageSizeOptions:[1,2,3],showQuickJumper:true,showSizeChanger:true,total,onChange:(page, pageSize)=>{
            setcurrent(page)
            setpageSize(pageSize)
        }
    }}/>
    </div> 
};

export default Shoplist;